<template>
	<view class="tab-navigation">
		<!-- 车辆标签 -->
		<view class="tab-item" :class="{ active: currentTab === 'vehicle' }" @click="handleTabClick('vehicle')">
			车辆
		</view>
		<!-- 挂车标签 -->
		<view class="tab-item1" :class="{ active: currentTab === 'trailer' }" @click="handleTabClick('trailer')">
			挂车
		</view>
	</view>
	<view v-for="(car, index) in cars" :key="index" class="vehicle-info-container">
		<view class="vehicle-info">
			<!-- 车牌号 -->
			<view class="license-plate">
				{{ car.carnumber || '未获取到车牌号' }}
			</view>
			<!-- 状态 -->
			<view class="status" :style="{ color: getStatusColor(car.carstatus) }">
				{{ getStatusText(car.carstatus) }}
			</view>
			<!-- 车辆类型 -->
			<view class="vehicle-type">
				{{ car.carspecification }} | {{car.dumpTruck}}
			</view>
			<view v-if="car.carstatus === 1" class="container">
				<view class="content">
					<image src="/static/hb.png" class="image"></image>
					<text class="text">{{ car.ren }}</text>
				</view>
			</view>
		</view>
		<view class="current-vehicle" :class="{ 'current-vehicle1': car.carstatus === 1 }">
			<checkbox :value="'current' + index" color="#007aff" style="margin-left: 10rpx;"></checkbox>
			<text style="font-size: 20rpx;">当前车辆</text>
			<view v-if="car.carstatus === 1" class="button-container">
				<view class="custom-button" @click="handleViewOrder">
					查看运单
				</view>
				<view class="custom-button" @click="handleManageDriver">
					管理司机
				</view>
				<view class="custom-button" @click="handleDelete">
					删除
				</view>
			</view>
			<view v-else-if="car.carstatus === 2" class="button-container1">
				<view class="custom-button1" @click="handleDelete">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	import {http} from '@/config/requst.js';
import { userStore } from '@/stores/user';
// 引入存放jwt的容器
import { tokenStore } from '@/stores/token';

// 引入容器
const token = tokenStore();
const u = userStore();
	// 当前选中的标签
	const currentTab = ref('vehicle');

	// 处理标签点击事件
	const handleTabClick = (tab) => {
		currentTab.value = tab;
		// 根据当前标签进行相应的操作
		if (tab === 'vehicle') {
			car();
			console.log('车辆标签被点击');
		} else if (tab === 'trailer') {
			console.log('挂车标签被点击');
		}
	};

	// 处理按钮点击事件的函数
	const handleViewOrder = () => {
		console.log('查看运单按钮被点击');
	};

	const handleManageDriver = () => {
		console.log('管理司机按钮被点击');
	};

	const handleDelete = () => {
		console.log('删除按钮被点击');
	};

	const cars = ref([]);

	const car = async () => {
		try {
			const res = await http({
				url: '/car/cha/' + u.user.id,
				method: 'post'
			});
			cars.value = res.shuju;
			console.log(cars.value);
			console.log(res);
		} catch (error) {
			console.error('获取车辆数据失败:', error);
		}
	};

	const getStatusText = (status) => {
		switch (status) {
			case 0:
				return '审核中';
			case 1:
				return '审核通过';
			case 2:
				return '审核不通过';
			default:
				return '未知状态';
		}
	};

	const getStatusColor = (status) => {
		switch (status) {
			case 0:
				return '#000000';
			case 1:
				return 'blue';
			case 2:
				return 'red';
			default:
				return '#000000';
		}
	};

	onMounted(() => {
		car();
	});
</script>

<style scoped>
	.button-container {
		margin-left: 130rpx;
		display: flex;
		gap: 8px;
		/* 按钮之间的间距 */
	}

	.button-container1 {
		margin-left: 425rpx;
		display: flex;
		gap: 8px;
		/* 按钮之间的间距 */
	}

	.custom-button {
	  border: 1px solid #5f7dbb;
	  display: inline-block;
	  padding: 8rpx 16rpx;
	  margin-left: 5rpx;
	  font-size: 25rpx;
	  color: #5f7dbb;
	  border-radius: 30rpx; /* 圆角 */
	  text-align: center;
	  cursor: pointer;
	}

	.custom-button1 {
		border: 1px solid #5f7dbb;
		display: inline-block;
		padding: 8rpx 16rpx;
		font-size: 25rpx;
		color: #5f7dbb;
		border-radius: 30rpx;
		/* 圆角 */
		text-align: center;
		cursor: pointer;
	}

	.container {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	.content {
		display: flex;
		align-items: center;
		/* 使图片和文字垂直居中对齐 */
	}

	.image {
		height: 50rpx;
		width: 50rpx;
		margin-right: 8rpx;
		/* 图片和文字之间的间距 */
	}

	.text {
		font-size: 20rpx;
	}

	.vehicle-info-container {
		margin-top: 30rpx;
	}

	.vehicle-info {
		margin-left: 30rpx;
		padding: 16rpx;
		width: 650rpx;
		margin-bottom: -15rpx;
		background-color: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 4rpx;
		display: flex;
		flex-direction: column;
	}

	.license-plate {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.vehicle-type {
		font-size: 25rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.status {
		font-size: 25rpx;
		margin-left: auto;
		margin-top: -50rpx;
		/* 调整状态文本的位置 */
	}

	.current-vehicle {
		background-color: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		height: 90rpx;
		width: 680rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.current-vehicle text {
		margin-left: 8rpx;
		font-size: 14rpx;
		color: #666;
	}

	.tab-navigation {
		display: flex;
		justify-content: space-between;
		padding: 0 16rpx;
	}

	.tab-item {
		padding: 12rpx;
		margin-left: 140rpx;
		font-size: 35rpx;
		color: #666;
	}

	.tab-item1 {
		padding: 12rpx;
		margin-right: 140rpx;
		font-size: 35rpx;
		color: #666;
	}

	.tab-item1.active {
		color: #007aff;
	}

	.tab-item.active {
		color: #007aff;
	}

	.tab-item.active::after {
		content: '';
		display: block;
		height: 2rpx;
		background-color: #007aff;
		margin-top: 4rpx;
		/* 调整下划线与文本的间距 */
	}

	.tab-item1.active::after {
		content: '';
		display: block;
		height: 2rpx;
		background-color: #007aff;
		margin-top: 4rpx;
		/* 调整下划线与文本的间距 */
	}
</style>